<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="main">
    <div class="x">1</div>
    <div class="x">2</div>
    <div class="x">3</div>
    <div class="x">4</div>
    <div class="x">5</div>
    <div class="x">6</div>
    <div class="x">7</div>
    <div class="x">8</div>
    <div class="x">9</div>
    <div class="x">0</div>
</div>
<div>
    <button type="button" id="show">Show</button>
    <button type="button" id="del">Delete</button>
</div>

<script src="../../5月学习笔记及练习/20190507/jquery-3.4.0.min.js"></script>
<script>
    // var l = $('#main .x').length;
    // console.log(l);
    // $('#main').css('color', 'blue');

    //这是未识jQuery之前的js写法
    // var divs = document.querySelectorAll('#main div');
    // console.log(divs);
    // for (var i = 0; i < divs.length; i++) {
    //     divs[i].onclick = function () {
    //         console.log(this.innerText);
    //         console.log(this.innerHTML);
    //     }
    // }

    $(document).ready(function () {
        // 在这里写你的代码

    })
    $(function ($) {
        
    })

    //jQuery的写法
    // $('#main').css('color','blue');
    $('#main').css({'color' : 'red','font-size':'29px','background-color':'green'});

    var ss = $('#main div');
    console.log(ss);

    // $(#main).empty('x');
    var controlDiv = $('#main');
    $('#del').click(function () {
        // controlDiv.empty();
        // controlDiv.remove();
        controlDiv.detach();
    });
    $('#show').click(function () {
        $('#main').append('<div class="x">newOne</div>');
    });
    $('#main').on('click','.x',function () {
        alert('点我一下我就来一下');
    });

    $('#show').on('click',{xxxxx:12345},function (e) {
        console.log(e);
    });

    //鼠标移入移出
    // $('#del').mouseover(function () {
    //     $(this).css('border','solid 2px red');
    // });
    // $('#del').mouseout(function () {
    //     $(this).css('border','solid 2px green');
    // });
    $('#del').hover(function () {
        $(this).css('border','solid 2px black');
    },function () {
        $(this).css('border','solid 2px yellow');
    })
</script>
</body>
</html>